<%--
  Created by IntelliJ IDEA.
  User: Administrator
  Date: 2022/12/15
  Time: 14:50
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>客户流失</title>
    <jsp:include page="../common/css_js.jsp"/>
    <jsp:include page="../common/table.jsp"/>
</head>
<body>
<div class="container col-lg-12 ">
    <div class="card">
        <header class="card-header">
            <div class="card-title"><b style="font-size: 25px">客戶流失列表--所有客戶流失信息</b></div>
        </header>
        <div class="card-body">
            <!-- 条件查询表单 -->
            <form class="form-inline" name="form1" action="#" method="post">
                <b>客户名称：</b><label>
                <input name='customerName' style="width: 125px;" placeholder='请输入客户名称' class='form-control'/>
            </label>&nbsp;&nbsp;
                <b>状态：</b><label>
                <select name='state' style="width: 105px;" class='form-control'>
                    <option value=''>请选择</option>
                    <option value='1'>暂缓流失</option>
                    <option value='2'>流失报警</option>
                    <option value='3'>确认流失</option>
                </select>
            </label>&nbsp;&nbsp;
                <b>流失时间：</b>
                <label>
                    <input class="form-control" type="text" data-provide="datepicker" name="confirmLossDateMin"
                           placeholder="开始时间" data-today-highlight="true" data-autoclose="false"/>
                </label>
                &nbsp;—&nbsp;
                <label>
                    <input class="form-control" type="text" data-provide="datepicker" name="confirmLossDate"
                           placeholder="结束时间" data-today-highlight="true" data-autoclose="false"/>
                </label>
                &nbsp;&nbsp;
                <button type="button" class="btn btn-primary" onclick="like()"><span
                        class="mdi mdi-table-search"></span>搜索
                </button>
            </form>
            <div id="toolbar">
                <!-- 操作 -->
                <a class="btn btn-danger" href="#" onclick="batchDelete('customer-loss')"><span class="mdi mdi-delete"></span>批量删除</a>
                <a class='btn btn-primary' href='#' onclick='query()'><span class='mdi mdi-table-large'></span>显示所有</a>
            </div>
            <!-- 数据显示 -->
            <div class="table-responsive">
                <table id="table"></table>
            </div>
        </div>
    </div>
</div>


<!-- Modal -->
<div class="modal fade bd-example-modal-lg" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog modal-lg" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h4 class="modal-title" id="myModalLabel">修改客户流失信息</h4>
                <div class="col-md-2 column"></div>
                <div class="col-md-4 column" id="close"></div>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <a aria-hidden="true">&times;</a>
                </button>
            </div>
            <div class="modal-body" style="background-color: #f8faf7;">
                <!-- 增加修改表单 -->
                <div class="table-responsive">
                    <form>
                        <table class="table table-bordered table-hover" id="tab333">
                            <input type='hidden' name='id'/>
                            <tr>
                                <td>客户编号：</td>
                                <td><label><input style="background-color: white" name='customerNo' class='form-control'
                                                  readonly="readonly"/></label></td>
                                <td>客户名称：</td>
                                <td><label><input name='customerName' class='form-control'
                                                  placeholder="请输入客户名称"/></label></td>
                            </tr>
                            <tr>
                                <td>客户经理：</td>
                                <td><label><input name='customerManager' class='form-control'
                                                  placeholder="请输入客户经理"/></label></td>
                                <td>最后下单时间：</td>
                                <td><label>
                                    <input class="form-control" type="text" data-provide="datepicker"
                                           name="lastOrderDate" placeholder="请输入最后下单时间"
                                           data-today-highlight="true"
                                           data-autoclose="false"/>
                                </label></td>
                            </tr>
                            <tr>
                                <td>确认流失时间：</td>
                                <td><label>
                                    <input class="form-control" type="text" data-provide="datepicker"
                                           name="confirmLossDate" placeholder="请输入确认流失时间"
                                           data-today-highlight="true"
                                           data-autoclose="false"/>
                                </label>
                                </td>
                                <td>状态：</td>
                                <td><label>
                                    <select name="state" class="form-control">
                                        <option value="1">暂缓流失</option>
                                        <option value="2">流失报警</option>
                                        <option value="3">确认流失</option>
                                    </select>
                                </label></td>
                            </tr>
                            <tr>
                                <td>流失原因：</td>
                                <td><label><input name="lossReason" class="form-control"
                                                  placeholder="请输入流失原因"></label>
                                </td>
                                <td>是否有效：</td>
                                <td>
                                    <div class='custom-control custom-radio custom-control-inline'>
                                        <input type='radio' id='customRadioInline6' name='isValid' value='1'
                                               class='custom-control-input' checked='checked'>
                                        <label class='custom-control-label' for='customRadioInline6'>有效</label>
                                    </div>
                                    <div class='custom-control custom-radio custom-control-inline'>
                                        <input type='radio' id='customRadioInline7' name='isValid' value='0'
                                               class='custom-control-input'>
                                        <label class='custom-control-label' for='customRadioInline7'>无效</label>
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </form>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                <button type="button" id="btn111" class="btn btn-primary" onclick="insert_update()">修改</button>
            </div>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(function () {
        // 初始化表格
        $('#table').bootstrapTable({
            classes: 'table table-bordered table-hover table-striped text-nowrap',    // 表格样式
            url: '${ctx}/customer-loss/list',     // 请求后台的URL
            method: 'GET',      // 请求方式
            toolbar: "#toolbar",
            pagination: true,   //是否显示分页条
            pageNumber: 1,      // 首页页码，默认为1
            pageSize: 5,        //一页显示的行数
            paginationLoop: false,   //是否开启分页条无限循环，最后一页时点击下一页是否转到第一页
            pageList: [5, 10, 20],   //选择每页显示多少行，数据过少时可能会没有效果
            clickToSelect: true, // 是否启用点击选中行
            undefinedText: '-', // 当字段为 undefined 显示
            sortOrder: "asc", // 排序方式
            showColumns: true, // 是否显示所有的列
            showRefresh: true, // 是否显示刷新按钮
            showToggle: true, // 是否显示详细视图和列表视图的切换按钮(clickToSelect同时设置为true时点击会报错)
            showExport: true,        // 是否显示导出按钮, 导出功能需要导出插件支持(tableexport.min.js)
            exportDataType: "all", // 导出数据类型, 'basic':当前页, 'all':所有数据, 'selected':选中的数据
            // 响应处理
            responseHandler: function (res) {
                if (res.code !== 200) {
                    notify("mdi mdi-close", res.message, "danger");
                    return [];
                }

                return res.data;
            },
            // 查询参数
            queryParams: function () {                // 查询条件
                return $("[name='form1']").serializeArray();    // 得到条件查询表单中所有的值
            },
            columns: [{             // 列
                field: 'example',
                checkbox: true      // 是否显示复选框
            }, {
                field: 'no',   // 属性名
                align: 'center',    // 对齐方式
                title: '序号',    // 标题
                formatter: function (value, row, index) {
                    return index + 1;
                }
            }, {
                field: 'id',
                title: '编号',
                visible: false
            }, {
                field: 'customerNo',
                align: 'center',
                title: '客户编号'
            }, {
                field: 'customerName',
                align: 'center',
                title: '客户名称'
            }, {
                field: 'customerManager',
                align: 'center',
                title: '客户经理'
            }, {
                field: 'lastOrderDate',
                align: 'center',
                title: '最后下单时间'
            }, {
                field: 'confirmLossDate',
                align: 'center',
                title: '确认流失时间'
            }, {
                field: 'state',
                align: 'center',
                title: '状态',
                formatter: function (value, row, index) {
                    if (row.state === 1) {
                        return "<span class='text-warning'>暂缓流失</span>";
                    } else if (row.state === 2) {
                        return "<span class='text-danger'>流失报警</span>";
                    } else if (row.state === 3) {
                        return "<span class='text-success'>确认流失</span>";
                    } else {
                        return "-";
                    }
                }
            }, {
                field: 'lossReason',
                align: 'center',
                title: '流失原因'
            }, {
                field: 'isValid',
                align: 'center',
                title: '是否有效',
                formatter: function (value, row, index) {     // 格式化
                    if (row.isValid === 1) {
                        return "<span class='badge badge-success'>有效</sapn>";
                    } else if (row.isValid === 0) {
                        return "<span class='badge badge-danger'>无效</span>";
                    } else {
                        return "<span class='badge badge-info'>-</span>";
                    }
                }
            }, {
                field: 'createDate',
                align: 'center',
                title: '创建时间'
            }, {
                field: 'operate',
                align: 'center',
                title: '操作',
                formatter: btnGroup,
                events: {               // 事件
                    'click .loss-btn': function (event, value, row, index) {
                        loss(row);
                    },
                    'click .edit-btn': function (event, value, row, index) {
                        edit(row);
                    },
                    'click .del-btn': function (event, value, row, index) {
                        remove('customer-loss', row.id);
                    }
                }
            }],
            onLoadSuccess: function () {      // 数据加载成功时调用的方法

            },
            onLoadError: function () {        // 数据加载失败时调用的方法
                setTimeout(function () {
                    notify("mdi mdi-close", "数据加载失败!", "danger");
                }, 300);
            },
            onCheck: function () {        // 复选框单击事件
                getSelections();
            }
        });
    });


    // 操作按钮
    function btnGroup(value, row, index) {
        let btn;
        if (row.state === 1) {
            btn = '<a href="#" class="btn btn-xs btn-warning m-r-5 loss-btn" title="暂缓流失" data-toggle="tooltip"><span class="mdi mdi-post-outline"></span>暂缓</a>';
        } else if (row.state === 2) {
            btn = '<a href="#" class="btn btn-xs btn-danger m-r-5 loss-btn" title="流失报警" data-toggle="tooltip"><span class="mdi mdi-information"></span>详情</a>';
        } else if (row.state === 3) {
            btn = '<a href="#" class="btn btn-xs btn-info m-r-5 loss-btn" title="确定流失" data-toggle="tooltip"><span class="mdi mdi-information"></span>详情</a>';
        } else {
            btn = '-';
        }
        return btn + '<a href="#" class="btn btn-xs btn-success m-r-5 edit-btn" title="修改" data-toggle="tooltip"><span class="mdi mdi-pencil"></span>修改</a>' +
            '<a href="#" class="btn btn-xs btn-danger m-r-5 del-btn" title="删除" data-toggle="tooltip"><span class="mdi mdi-window-close"></span>删除</a>';
    }


    // 操作方法 - 流失措施
    function loss(r) {
        let txt;
        if (r.state === 1) {
            txt = 'text-warning';
        } else if (r.state === 2) {
            txt = 'text-danger';
        } else if (r.state === 3) {
            txt = 'text-info';
        }

        let loader = $('body').lyearloading({
            opacity: 0.2,
            spinnerSize: 'lg',
            backgroundColor: 'gray',
            spinnerText: '页面加载中，请稍后...',
            textColorClass: txt,
            spinnerColorClass: txt
        });
        setTimeout(function () {
            loader.destroy();
            location.href = '${ctx}/page/retrieval/' + r.id;
        }, 1e3);
    }


    // 操作方法 - 编辑
    function edit(r) {
        $("#myModal").modal("show");
        $("[name='id']").val(r.id);
        $("[name='customerNo']").val(r.customerNo);
        $("[name='customerName']:eq(1)").val(r.customerName);
        $("[name='customerManager']").val(r.customerManager);
        $("[name='lastOrderDate']").val(r.lastOrderDate);
        $("[name='confirmLossDate']:eq(1)").val(r.confirmLossDate);
        $("[name='state']:eq(1)").val(r.state);
        $("[name='lossReason']").val(r.lossReason);
        (r.isValid === 1) ? $("[name='isValid']:eq(0)").prop("checked", true) : $("[name='isValid']:eq(1)").prop("checked", true);
    }


    // 操作方法 - 修改
    function insert_update() {
        let b = false;

        let $customerName = $("[name='customerName']:eq(1)");
        let $customerManager = $("[name='customerManager']");
        let $lastOrderDate = $("[name='lastOrderDate']");
        let $confirmLossDate = $("[name='confirmLossDate']:eq(1)");
        let $state = $("[name='state']:eq(1)");
        let $lossReason = $("[name='lissReason']");

        if ($customerName.val() === '') {
            notify("mdi mdi-close", "客户名称为必填项！", "danger");
            $customerName.focus();
        } else if ($customerManager.val() === '') {
            notify("mdi mdi-close", "客户经理为必填项！", "danger");
            $customerManager.focus();
        } else if ($lastOrderDate.val() === '') {
            notify("mdi mdi-close", "最后下单时间为必填项！", "danger");
            $lastOrderDate.focus();
        } else if ($confirmLossDate.val() === '') {
            notify("mdi mdi-close", "确认流失时间为必填项！", "danger");
            $confirmLossDate.focus();
        } else if ($state.val() === '') {
            notify("mdi mdi-close", "请选择状态！", "danger");
            $state.focus();
        } else if ($lossReason.val() === '') {
            notify("mdi mdi-close", "流失原因为必填项！", "danger");
            $lossReason.focus();
        } else {
            b = true;
        }

        if (b) {
            let obj = $("form:eq(1)").serializeArray();
            
            saveOrUpdate("${ctx}/customer-loss/update", obj)
        }
    }
</script>
</body>
</html>
